<template>
  <div class="BookInfo">
    <!--顶部轮播图区域 -->
    <mt-swipe :auto="2000">
      <mt-swipe-item v-for="item in image" :key="item.id"><a :href="item.img_h"><img :src="item.img_u" alt=""></a></mt-swipe-item>
    </mt-swipe>

    <!-- 小球-->
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
       <div class="ball" v-show="isShow" ref='ball'></div>
    </transition>

    <!--漫画购买区域 -->

    			<div class="mui-card">
    				<div class="mui-card-header">{{booklist.title}}</div>
    				<div class="mui-card-content">
    					<div class="mui-card-content-inner">
    						<p class="price">
                  市场价：<del>{{booklist.market}}</del>&nbsp;&nbsp;销售价:<span class="now_price">{{booklist.sell_price}}</span>
                </p>
                <p>购买数量:<numbox @getCount="getSelectCount" :max="booklist.stock"></numbox> </p>
                <p>
                  <mt-button type="primary" size="small">立即购买</mt-button>
                  <mt-button type="danger" size="small" @click="ballShow">加入购物车</mt-button>
                  <!-- 如何实现加入购物车时 拿到选择的数量 涉及到子组件numbox向父组件BookInfo传值的问题 :通过触发事件 -->


                </p>
    					</div>
    				</div>
    			</div>

           <!-- 商品参数区域-->
          <div class="mui-card">
                      <div class="mui-card-header">商品参数</div>
                      <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                           <p>商品货号:{{booklist.book_no}}</p>
                           <p>库存情况:{{booklist.stock}}</p>
                           <p>上家时间:{{booklist.add_time|dataFormat}}</p>
                        </div>
                      </div>
                  <div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
                  </div>
            </div>


  </div>
</template>

<script>
  import numbox from '../subcompoments/Numbox.vue'
  export default{
    data(){
      return{
        isShow:false,//保存小球是否显示的标识符
        seletCount:1,//保存用户选中的商品数量
        // id:this.$route.params.id,
        image:[
          {
            id:1,
            img_u:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3632331434,3091286222&fm=26&gp=0.jpg",
            img_h:'https://ac.qq.com/Comic/ComicInfo/id/637865'
          },
          {
            id:2,
            img_u:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3217025656,1619218721&fm=26&gp=0.jpg",
            img_hf:"https://ac.qq.com/Comic/ComicInfo/id/624570"
          },
          {
            id:3,
            img_u:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1083867094,3246372728&fm=26&gp=0.jpg",
            img_h:"https://ac.qq.com/Comic/ComicInfo/id/542330"
          },
        ],
        booklist:
          {
            id:1,
            title:'一人之下',
            add_time:"2020-04-23T18:20:56.000Z",
            book_no:'SD1254855636',
            stock:20,
            market:68,
            sell_price:59

          }
      }
    },
    components:{
      numbox
    },
    methods:{
       goDesc(id){
         //点击使用编程路由导航跳转到图文介绍页面
         this.$router.push({name:"booksdesc",params:{id}})
       },
       goComment(id){
           this.$router.push({name:"bookscomment",params:{id}})
       },
       ballShow(){
         //添加到购物车
         this.isShow=!this.isShow
         //{id：商品的id，count要购买的数量，price商品的单价.selected:false}
         var bookinfo={
           id:this.id,
           count:this.seletCount,
           price:this.booklist.sell_price,
           selected:true
         };
         //调用store中的mutations将商品加入到购物车中
         this.$store.commit('addToCar',bookinfo)


       },
       beforeEnter(el){
         el.style.transform="translate(0,0)"
       },
       enter(el,done){
            el.offsetWidth
            /*
            小球优化坑：
            小球位置写死了
            解决：动态计算坐标值      domobject.getBoundingClientRect()

            */
           //获取小球在页面的位置
            const ballPosition= this.$refs.ball.getBoundingClientRect()
            //获取徽标在页面中位置
            const badgePosition=document.getElementById('badge').getBoundingClientRect()
            const xDist=badgePosition.left-ballPosition.left
            const yDist=badgePosition.top-ballPosition.top

            el.style.transform=`translate(${xDist}px,${yDist}px)`
            el.style.transition="all 0.5s ease"
            done()
       },
       afterEnter(el){
           this.isShow=!this.isShow
       },
       getSelectCount(count){
         //当子组件吧选中的数量传递给父组件时 吧选中的值保存到data上
         this.seletCount=count
         console.log("父组件拿到了子组件传过来的购买值"+this.seletCount)
       }

    }
  }
</script>

<style scoped>
  .mint-swipe{
     height: 250px;
     text-align: center;
   }
   .BookInfo{
     background-color:#eee ;
      overflow: hidden;
   }
   img{
     height: 100%;
     width: 90%;
   }
   .now_price{
     color: red;
   }
   .mui-card-footer{
     display: block;
   }
   button{
     margin: 15px 0;
   }
   .ball{
     width: 15px;
     height: 15px;
     background-color: red;
     border-radius: 50%;
     position: absolute;
     left: 167px;
     top: 402px;
     z-index: 99;
   }

</style>
